<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch"/>
 </div>
</template>

<script>
    //引入School组件
  import School from './components/School'

  export default {
    name: 'App',
    components:{School}, 
    
    data(){
      return {
        msg: '欢迎使用vue',
      }
    },
    methods: {
      showDOM() {
        // alert('12312312')
          console.log(this.$refs.title); //真是DOM元素
          console.log(this.$refs.btn); //真实DOM元素
          console.log(this.$refs.sch);//School组件的实体
      }
    },
  }
</script>

<style>

</style>
